import React, { memo, useEffect, useState } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import { getRadios } from '../../store/actionCreators'

import HYThemeHeaderNormal from '@/components/theme-header-normal'
import HYRadioRankingCover from '@/components/radio-ranking-cover'
import HYPagination from '@/components/pagination'
import { RankingWrapper } from './style'

export default memo(function HYRadioRanking () {
  const [currentPage, setCurrentPage] = useState(1);

  const { currentId, radios } = useSelector(state => ({
    currentId: state.getIn(['djradio', 'currentId']),
    radios: state.getIn(['djradio', 'radios'])
  }), shallowEqual);

  const dispatch = useDispatch();
  useEffect(() => {
    if (currentId === 0) return;
    dispatch(getRadios(currentId, 0))
  }, [dispatch, currentId])

  const onPageChange = (page, pageSize) => {
    setCurrentPage(page);
    dispatch(getRadios(currentId, page * 30));
  }

  return (
    <RankingWrapper>
      <HYThemeHeaderNormal title="电台排行榜" />
      <div className="ranking-list">
        {
          radios.map((item, index) => {
            return (<HYRadioRankingCover radio={item} key={item.id} />)
          })
        }
      </div>
      <HYPagination
        currentPage={currentPage}
        total={1000}
        pageSize={30}
        onPageChange={onPageChange}
      />
    </RankingWrapper>
  )
})
